<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>layui-ueditor demo</title>
		<style type="text/css">
			div {
				width: 100%;
				margin: 20px;
			}
		</style>
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>
	<body>
		<div>
			<h1>完整demo</h1>
			<!-- 加载编辑器的容器 -->
			<script id="container" name="content" type="text/plain" style="width:1024px;height:500px;">这里写你的初始化内容</script>
		</div>
		<br>
		<fieldset id="btns" class="layui-elem-field site-demo-button" style="padding: 20px;width: 1200px;">
			<div>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="getAllHtml">获得整个html的内容</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="getContent">获得内容</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setContent">写入内容</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setContent">追加内容</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="getContentTxt">获得纯文本</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="getPlainTxt">获得带格式的纯文本</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="hasContent">判断是否有内容</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setFocus">使编辑器获得焦点</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="isFocus(event)">编辑器是否获得焦点</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setblur(event)">编辑器失去焦点</button>
			</div>
			<br>
			<div>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="getText">获得当前选中的文本</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="insertHtml">插入给定的内容</button>
				<button type="button" class="layui-btn layui-btn-sm" id="enable" lay-event="setEnabled">可以编辑</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setDisabled">不可编辑</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setHide">隐藏编辑器</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setShow">显示编辑器</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="setHeight">设置高度为300默认关闭了自动长高</button>
			</div>
			<br>
			<div>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="getLocalData">获取草稿箱内容</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="clearLocalData">清空草稿箱</button>
			</div>

		</fieldset>
		<fieldset class="layui-elem-field site-demo-button" style="padding: 20px;width: 1200px;">
			<br>
			<div>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="createEditor">创建编辑器</button>
				<button type="button" class="layui-btn layui-btn-sm" lay-event="deleteEditor">删除编辑器</button>
			</div>
		</fieldset>

	</body>
	<script src="../layui/layui.js"></script>
	<script>
		layui.extend({
			ueditor: '{/}./ueditor/ueditor'
		}).use(['ueditor', 'util', 'layer'], function() {
			var ueditor = layui.ueditor,
				util = layui.util;
			var ue = ueditor.render('container', {

			});
			
			util.event('lay-event', {
				getAllHtml: function() {
					alert(ue.getAllHtml())
				},
				getContent: function() {
					var arr = [];
					arr.push("使用editor.getContent()方法可以获得编辑器的内容");
					arr.push("内容为：");
					arr.push(ue.getContent());
					alert(arr.join("\n"));
				},
				isFocus: function() {
					alert(ue.isFocus());
					ue.dom.domUtils.preventDefault(true)
				},
				setblur: function(e) {
					ue.blur();
					ue.dom.domUtils.preventDefault(e)
				},
				insertHtml: function() {
					var value = prompt('插入html代码', '');
					ue.execCommand('insertHtml', value)
				},
				createEditor: function() {
					console.log("创建")
					enableBtn();
					ue = ueditor.render('container');
				},
				getPlainTxt: function() {
					var arr = [];
					arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
					arr.push("内容为：");
					arr.push(ue.getPlainTxt());
					alert(arr.join('\n'))
				},
				setContent: function(isAppendTo) {
					var arr = [];
					arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
					ue.setContent('欢迎使用ueditor', isAppendTo);
					alert(arr.join("\n"));
				},
				setDisabled: function() {
					ue.setDisabled('fullscreen');
					disableBtn("enable");
				},
				setEnabled: function() {
					
					ue.setEnabled();
					enableBtn();
				},
				getText: function() {
					//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
					var range = ue.selection.getRange();
					range.select();
					var txt = ue.selection.getText();
					alert(txt)
				},
				getContentTxt: function() {
					var arr = [];
					arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
					arr.push("编辑器的纯文本内容为：");
					arr.push(ue.getContentTxt());
					alert(arr.join("\n"));
				},
				hasContent: function() {
					var arr = [];
					arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
					arr.push("判断结果为：");
					arr.push(ue.hasContents());
					alert(arr.join("\n"));
				},
				setFocus: function() {
					ue.focus();
				},
				deleteEditor: function() {
					disableBtn();
					ue.destroy();
				},
				setHide: function() {
					ue.setHide();
				},
				setShow: function() {
					ue.setShow();
				},
				setHeight: function() {
					ue.setHeight(300);
				},
				getLocalData: function() {
					alert(ue.execCommand("getlocaldata"));
				},
				clearLocalData: function() {
					ue.execCommand("clearlocaldata");
					alert("已清空草稿箱")
				}
			})

			function disableBtn(str) {
				console.log(str)
				var div = document.getElementById('btns');
				var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
				for (var i = 0, btn; btn = btns[i++];) {
					console.log(btn.id)
					if (btn.id == str) {
						UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
					} else {
						btn.setAttribute("disabled", "true");
						UE.dom.domUtils.addClass(btn,'layui-btn-disabled');
					}
				}
			}

			function enableBtn() {
				var div = document.getElementById('btns');
				var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
				for (var i = 0, btn; btn = btns[i++];) {
					UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
					UE.dom.domUtils.removeClasses(btn,'layui-btn-disabled');
				}
			}

		})
	</script>
</html>
